<template>
	<!-- 文件夹 -->
	<view class="item" v-if="item.isFolder">
		<image class="icon" src="/static/icon/folder.png" mode="widthFix"></image>
		<view class="title">{{item.name}}</view>
	</view>

	<!-- 文件 -->
	<view class="item" v-else>
		<van-checkbox v-if="deleteMore" class="checkbox" :name="item"></van-checkbox>
		<image v-if="['jpg','jpeg','png','gif','svg'].includes(item.type)" class="icon" src="/static/icon/image.png"
			mode="widthFix"></image>
		<image v-else-if="['txt','text'].includes(item.type)" class="icon" src="/static/icon/txt.png" mode="widthFix">
		</image>
		<image v-else-if="['exe'].includes(item.type)" class="icon" src="/static/icon/exe.png" mode="widthFix">
		</image>
		<image v-else-if="['pdf'].includes(item.type)" class="icon" src="/static/icon/pdf.png" mode="widthFix">
		</image>
		<image v-else-if="['rar','zip','7z'].includes(item.type)" class="icon" src="/static/icon/rar.png" mode="widthFix">
		</image>
		<image v-else class="icon" src="/static/icon/other.png" mode="widthFix"></image>
		<view class="title">{{item.name}}</view>
	</view>
</template>

<script setup>
import { toRefs } from 'vue';

	const props = defineProps({
		item:'object',
		deleteMore:'boolean'
	})
	const { item } = toRefs(props)
</script>

<style lang="scss">
.item {
			width: 90px;
			padding: 20px;
			position: relative;

			&:hover {
				background: #f1f1f1;
				cursor: pointer;
			}

			.checkbox {
				position: absolute;
				right: 15px;
				top: 15px;
			}

			.icon {
				width: 70px;
				height: 70px;
				margin: 0 auto;
				display: block;
			}

			.title {
				font-size: 12px;
				color: #222;
				text-align: center;
				margin-top: 6px;
				word-wrap: break-word;
			}
		}
</style>